<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">工作台</p>
    </div>
    <div class="view-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="更新时间:">
          {{ parseTime(new Date()) }}
        </el-form-item>
        <el-form-item label="按起止时间:" prop="time">
          <el-date-picker
              v-model="time"
              type="daterange"
              range-separator="至"
              style="width: 230px;"
              @change="dataTime()"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="list-search">重置</el-button>
        </el-form-item>
      </el-form>
      <el-descriptions title="采购（数据为昨日数据）" border direction="vertical" :column="4">
        <el-descriptions-item label="采购订单单据量">{{ list.purchaseOrderCount }}</el-descriptions-item>
        <el-descriptions-item label="采购入库单据量">{{ list.purchaseInboundCount }}</el-descriptions-item>
        <el-descriptions-item label="入库数量">{{ list.warehousingCount }}</el-descriptions-item>
        <el-descriptions-item label="采购额(元)">{{ list.purchaseAmount }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="销售（数据为昨日数据）" border direction="vertical" :column="4">
        <el-descriptions-item label="销售订单单据量">{{ list.saleOrderCount }}</el-descriptions-item>
        <el-descriptions-item label="销售出库单据量">{{ list.saleOutCount }}</el-descriptions-item>
        <el-descriptions-item label="出库数量">{{ list.outStoreCount }}</el-descriptions-item>
        <el-descriptions-item label="销售额(元)">{{ list.saleAmount }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { workBenchList } from "@/api/system/workBench/workBench"
import { warehouseAlert } from "@/api/system/warehouseAlert/warehouseAlert"
import Notification from '../components/notification.vue';
export default {
  name: "Index",
  components: {
    Notification
  },
  data() {
    return {
      list: [],
      queryParams: {
        startTime: '',
        endTime: ''
      },
      time: [],
      openList: '',
    }
  },
  created() {
    let userInfo = this.$store.state.user
    let roles = userInfo.roles.indexOf('admin')
    let warehouseAlert = userInfo.permissions.indexOf('system:productStorage:warehouseAlert')
    this.getList()
    if(roles > -1){
      this.getWarehouseAlert()
    }else{
      if(warehouseAlert && warehouseAlert > -1){
        this.getWarehouseAlert()
      }
    }
  },
  methods: {
    // 库存预警
    getWarehouseAlert(){
      warehouseAlert({pageNum: 1, pageSize: 5}).then(res => {
        this.openList = res.rows
        this.open()
      })
    },
    open() {
      let that = this
      this.$notify({
        title: '库存预警',
        customClass: 'notification-item',
        dangerouslyUseHTMLString: true,
        message: <Notification value={this.openList}></Notification>,
        position: 'bottom-right',
        duration: 0,
        onClick(){
          this.close()
          that.handView()
        }
      })
    },
    close(){
      this.$notify.close()
    },
    handView(){
      this.$router.push({path:"/warehouseManagement/stock/spuList"})
    },
    // 获取列表
    getList() {
      workBenchList(this.addDateRange(this.queryParams)).then(res => {
        this.list = res.data
      })
    },
    // 搜索按钮
    handleQuery() {
      this.getList()
    },
    // 重置按钮
    resetQuery() {
      this.resetForm("queryForm")
      this.time = ''
      this.queryParams.startTime = ''
      this.queryParams.endTime = ''
      this.handleQuery()
    },
    // 时间选择器
    dataTime(){
      if(this.time){
        let day = 24 * 60 * 60 * 1000
        this.queryParams.startTime = this.parseTime(this.time[0])
        this.queryParams.endTime = this.parseTime(this.time[1].getTime() + day)
      }else if(this.time == null){
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
    },
  },
}
</script>

<style scoped>
::v-deep .el-form-item{
  margin-right: 30px;
  margin-bottom: 0;
}
::v-deep .el-descriptions{
  margin-top: 20px;
}
::v-deep .el-descriptions-item__cell{
  width:25%;
}
::v-deep .el-descriptions-item__content{
  font-size: 18px;
  font-weight: bold;
}
</style>